<%- include("./layouts/header.ejs")%>

  <div class="main">

    <%- include("./layouts/navBar.ejs")%>

    <div class="container-fluid">
      <div class="page-title">
        <h1>所有评论</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <div class="btn-batch" style="display: none">
          <button class="btn btn-info btn-sm">批量批准</button>
          <button class="btn btn-warning btn-sm">批量拒绝</button>
          <button class="btn btn-danger btn-sm">批量删除</button>
        </div>
        <ul class="pagination pagination-sm pull-right">
         
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
         

        </tbody>
      </table>
    </div>
  </div>

  <%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>

<!-- 引入分页插件 -->
<script src="/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
<!-- 引入前端渲染art-template模板 -->
<script type="text/template" id="commentsListTmp">
   {{each data as val key}}
      <tr class="danger">
        <td class="text-center">{{val.id}}</td>
        <td>{{val.author}}</td>
        <td>{{val.content.length>20?val.content.slice(0,10)+"...":val.content}}</td>
        <td>{{val.title}}</td>
        <td>{{val.created}}</td>
        {{if val.status=='held'}}
          <td>未批准/待审核</td>
        {{else if val.status =='approved'}}
          <td>已批准</td>
        {{else if val.status=='rejected'}}
          <td>拒绝</td>
        {{else}}
          <td>回收站</td>
        {{/if}}
        <td class="text-center">
          <a href="javascript:;" data-id="{{val.id}}" class="btnOK btn btn-info btn-xs">批准</a>
          <a href="javascript:;" data-id="{{val.id}}" class="btnDel btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
</script>

<script>
  var currentPage = 1;  //设置当前默认页码

  //1.发送ajax请求,获取页面数据渲染
  $.ajax({
    type: "get",
    url: "/getCommentsData",
    dataType: "json",
    success: function(res){
      //获取数据准备模板渲染页面
      var htmlStr = template("commentsListTmp",res)
      $("tbody").html(htmlStr)

       // 启用分页
      pagination(res.totalPages)
    }
  })

  // 封装分页函数
  function pagination(totalPages){
     // 2. 启用分页
    $('.pagination').twbsPagination({
      totalPages: totalPages,
      visiblePages: 7,
      first: '第一页',
      prev: '上一页',
      next: '下一页',
      last: '最后一页',
      
      initiateStartPageClick: false,// 默认一开始加载的时候，不要打印页码数
      onPageClick: function (event, page) {
        renderPageData(page)

        currentPage = page;
      }
    });
  }

  //封装渲染页面数据的函数
  function renderPageData(page){
    $.ajax({
      type:"get",
      url:"/getCommentsDataByPage",
      data:{page:page},
      dataType:"json",
      success: function(res){
        //准备模板渲染页面
        var htmlStr = template("commentsListTmp",res)
        $("tbody").html(htmlStr)
      }
    })
  }

  //2.删除评论
  //2.1 使用委托的方式注册事件
  $("tbody").on("click",".btnDel",function(){
    //2.2 发送异步ajax请求
    $.ajax({
      type:"get",
      url:"/delCommentsInfo",
      data:{
        id:$(this).attr("data-id") // 获取点击删除项的id
      },
      dataType: "json",
      success: function(res){
        //删除成功,需要重新读取当前页码的数据,重新渲染页面数据
        if (res && res.code == 0) {
          //重新更新当前页面的数据
          renderPageData(currentPage)
        }
      }
    })
  })

  //3.批准发布评论
  //3.1使用委托的方式注册事件
  $("tbody").on("click", ".btnOK",function(){
    //3.2发送异步ajax请求
    $.ajax({
      type: "get",
      url: "/updateCommentsStatus",
      data: {
        id:$(this).attr("data-id") // 获取点击修改发布状态的id
      },
      success: function(res){
        if(res&&res.code==0){
          //重新更新当前页面的数据
          renderPageData(currentPage)
        }
      }
    })
  })
</script>
